<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="theme-color" content="#000000">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>gitee-stargazers 用户趋势</title>
    <link rel="apple-touch-icon-precomposed"href="/favicon.png" sizes="144x144"  />
    <link rel="apple-touch-icon-precomposed" href="/favicon.png" sizes="152x152" />
    <link rel="icon" type="image/png" href="/favicon.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="/favicon.png" sizes="16x16" />
    <meta name="description" content="StarCharts">
    <meta name="author" content="https://github/zhangyd-c">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.14.0/css/all.min.css">
</head>
<body>
<div class="container">
    <div class="jumbotron mt-2 p-4">
        <h1 class="display-4 initialism font-weight-bold">gitee-stargazers</h1>
        <p class="lead">网站使用统计</p>
        <hr class="my-4">
        <p>共有 <b><%=totalUser %> 个</b>用户主体，<b><%=totalProject %> 个</b>项目在使用该系统。<a href="/">返回首页</a></p>
    </div>
    <div class="alert alert-success" role="alert">
        点击项目名后的 <i class="fa fa-chart-line fa-sm"></i>，可以查看该项目加载图表的历史耗时情况
    </div>
    <% if(typeof users != 'undefined' && users != null) {%>
    <div class="row mt-4">
        <!-- 遍历所有用户 -->
        <% for (var i =0; i < users.length;  i++ ) { %>
        <div class="col-sm-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title"><%=users[i] %> <span class="badge badge-light badge-pill text-muted"><%=project[users[i]].length %> 个项目</span></h5>
                    <h6 class="card-subtitle mb-2 text-muted"></h6>
                    <ul class="list-group border-0">
                        <% for (var j =0; j < project[users[i]].length;  j++ ) { %>
                        <li class="list-group-item d-flex justify-content-between align-items-center border-0 p-1 pl-3">
                            <a href="https://gitee.com/<%=users[i] %>/<%=project[users[i]][j] %>" target="_blank" title="点击查看仓库详情，https://gitee.com/<%=users[i] %>/<%=project[users[i]][j] %>">
                                <%=project[users[i]][j] %><span class="badge badge-light badge-pill" title="生成次数（访问次数）"><%=visitNum[project[users[i]][j]] %>次</span>
                            </a>
                            <a href="javascript:;;" data-owner="<%=users[i] %>" data-repo="<%=project[users[i]][j] %>" class="chartModalTarget" title="点击查看项目访问统计图">
                                <i class="fa fa-chart-line fa-sm mr-2"></i>
                            </a>
                        </li>
                        <% } %>
                    </ul>
                </div>
            </div>
        </div>
        <% } %>
    </div>
    <%}%>
</div>

<!-- Modal -->
<div class="modal fade" id="chartModal" tabindex="-1" aria-labelledby="chartModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="chartModalLabel">图表历史加载耗时（近100条记录）</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="container" style="max-width:800px;height:400px"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.0.0/dist/jquery.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/oldie.js"></script>
<script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script>
    $(".chartModalTarget").click(function (){
        let $this = $(this);
        var owner = $this.data("owner");
        var repo = $this.data("repo");
        $.getJSON(`/trend/project/chart/${owner}/${repo}`, {}, function (json) {
            console.log(json);
            const xStep = parseInt((json.seriesData.length / 5).toFixed(0))
            var chart = Highcharts.chart('container', {
                title: {
                    text: `${owner}/${repo} 项目图表历史加载耗时`
                },
                subtitle: {
                    text: '数据来源：whnb.wang'
                },
                legend: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                tooltip: {
                    shared: true,
                    useHTML: true,
                    headerFormat: '<small>{point.key}</small><table>',
                    pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
                        '<td style="text-align: right"><b>{point.y} ms</b></td></tr>',
                    footerFormat: '</table>',
                    valueDecimals: 0
                },
                xAxis: {
                    categories: json.xAxisData,
                    tickInterval: xStep,
                    tickmarkPlacement: 'on',
                    labels: {
                        style: {
                            color: 'gray',
                            fontSize: '8px'
                        }
                    }
                },
                yAxis: {
                    title: {
                        text: '加 载 耗 时（ms）'
                    }
                },
                series: [{
                    name: '耗时',
                    data: json.seriesData
                }],
                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 500
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                verticalAlign: 'bottom'
                            }
                        }
                    }]
                }
            });
            $("#chartModal").modal('show')
        })
    })
</script>
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?cbe774ebaa00e2bbd30b43935172a62f";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</body>
</html>
